{{! Listen for ArrowUp/ArrowDown/Enter }}
{{on-document "keydown" this.maybeKeyboardNavigate}}

{{#if this.itemsAreShown}}
  {{! @glint-ignore - element helper not yet typed }}
  {{#let (element (if @listIsOrdered "ol" "ul")) as |MaybeOrderedList|}}
    {{#if this.listIsShown}}
      <MaybeOrderedList
        data-test-x-dropdown-list
        id="x-dropdown-list-items-{{@contentID}}"
        class="x-dropdown-list-items"
        role={{if this.args.inputIsShown "listbox" "menu"}}
        aria-activedescendant={{this.ariaActiveDescendant}}
      >
        {{#if @shownItems}}
          {{#each-in @shownItems as |item attrs|}}
            <X::DropdownList::Item
              @value={{item}}
              @contentID={{@contentID}}
              @attributes={{attrs}}
              @isSelected={{eq @selected item}}
              @focusedItemIndex={{@focusedItemIndex}}
              @listItemRole={{@listItemRole}}
              @hideContent={{@hideContent}}
              @onItemClick={{@onItemClick}}
              @setFocusedItemIndex={{@setFocusedItemIndex}}
              as |i|
            >
              {{yield i to="item"}}
            </X::DropdownList::Item>
          {{/each-in}}
        {{/if}}
      </MaybeOrderedList>
    {{/if}}
  {{/let}}
{{else}}
  {{yield to="no-matches"}}
{{/if}}
